
<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/img/basic/favicon.ico" type="image/x-icon">
    <title>Paper</title>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/app.css">
    <style>
        .loader {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F5F8FA;
            z-index: 9998;
            text-align: center;
        }

        .plane-container {
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
    <!-- Js -->
    <!--
    --- Head Part - Use Jquery anywhere at page.
    --- http://writing.colin-gourlay.com/safely-using-ready-before-including-jquery/
    -->
    <script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>
</head>
<body class="light">
<!-- Pre loader -->
<div id="loader" class="loader">
    <div class="plane-container">
        <div class="preloader-wrapper small active">
            <div class="spinner-layer spinner-blue">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-red">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-yellow">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-green">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>
        </div>
    </div>
</div>
<div id="app">
<aside class="main-sidebar fixed offcanvas shadow" data-toggle='offcanvas'>
    <section class="sidebar">
        <div class="w-80px mt-3 mb-3 ml-3">
            <img src="assets/img/basic/logo.png" alt="">
        </div>
        <div class="relative">
            <a data-toggle="collapse" href="#userSettingsCollapse" role="button" aria-expanded="false"
               aria-controls="userSettingsCollapse" class="btn-fab btn-fab-sm absolute fab-right-bottom fab-top btn-primary shadow1 ">
                <i class="icon icon-cogs"></i>
            </a>
            <div class="user-panel p-3 light mb-2">
                <div>
                    <div class="float-left image">
                        <img class="user_avatar" src="assets/img/dummy/u2.png" alt="User Image">
                    </div>
                    <div class="float-left info">
                        <h6 class="font-weight-light mt-2 mb-1">Alexander Pierce</h6>
                        <a href="#"><i class="icon-circle text-primary blink"></i> Online</a>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="collapse multi-collapse" id="userSettingsCollapse">
                    <div class="list-group mt-3 shadow">
                        <a href="index.html" class="list-group-item list-group-item-action ">
                            <i class="mr-2 icon-umbrella text-blue"></i>Profile
                        </a>
                        <a href="#" class="list-group-item list-group-item-action"><i
                                class="mr-2 icon-cogs text-yellow"></i>Settings</a>
                        <a href="#" class="list-group-item list-group-item-action"><i
                                class="mr-2 icon-security text-purple"></i>Change Password</a>
                    </div>
                </div>
            </div>
        </div>
        <ul class="sidebar-menu">
            <li class="header"><strong>MAIN NAVIGATION</strong></li>
            <li class="treeview"><a href="#">
                <i class="icon icon-sailing-boat-water purple-text s-18"></i> <span>Dashboard</span> <i
                    class="icon icon-angle-left s-18 pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li><a href="index.html"><i class="icon icon-folder5"></i>Panel Dashboard 1</a>
                    </li>
                    <li><a href="panel-page-dashboard1-rtl.html"><i class="icon icon-folder5"></i>Panel Dashboard 1 - RTL</a>
                    </li>
                    <li><a href="panel-page-dashboard2.html"><i class="icon icon-folder5"></i>Panel Dashboard 2</a>
                    </li>
                    <li><a href="panel-page-dashboard3.html"><i class="icon icon-folder5"></i>Panel Dashboard 3</a>
                    </li>
                    <li><a href="panel-page-dashboard4.html"><i class="icon icon-folder5"></i>Panel Dashboard 4</a>
                    </li>
                    <li><a href="panel-page-dashboard5.html"><i class="icon icon-folder5"></i>Panel Dashboard 5</a>
                    </li>
                    <li><a href="panel-page-dashboard6.html"><i class="icon icon-folder5"></i>Panel Dashboard 6</a>
                    </li>
                    <li><a href="panel-page-dashboard7.html"><i class="icon icon-folder5"></i>Panel Dashboard 7</a>
                    </li>
                    <li><a href="panel-page-dashboard9.html"><i class="icon icon-folder5"></i>Panel Dashboard 9</a>
                    </li>

                </ul>
            </li>
            <li class="treeview"><a href="#">
                <i class="icon icon icon-package blue-text s-18"></i>
                <span>Products</span>
                <span class="badge r-3 badge-primary pull-right">4</span>
            </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-products.html"><i class="icon icon-circle-o"></i>All Products</a>
                    </li>
                    <li><a href="panel-page-products-create.html"><i class="icon icon-add"></i>Add
                        New </a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#"><i class="icon icon-account_box light-green-text s-18"></i>Users<i
                    class="icon icon-angle-left s-18 pull-right"></i></a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-users.html"><i class="icon icon-circle-o"></i>All Users</a>
                    </li>
                    <li><a href="panel-page-users-create.html"><i class="icon icon-add"></i>Add User</a>
                    </li>
                    <li><a href="panel-page-profile.html"><i class="icon icon-user"></i>User Profile </a>
                    </li>
                </ul>
            </li>
            <li class="treeview no-b"><a href="#">
                <i class="icon icon-package light-green-text s-18"></i>
                <span>Inbox</span>
                <span class="badge r-3 badge-success pull-right">20</span>
            </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-inbox.html"><i class="icon icon-circle-o"></i>All Messages</a>
                    </li>
                    <li><a href="panel7-inbox.html"><i class="icon icon-circle-o"></i>Panel7 - Inbox</a>
                    </li>
                    <li><a href="panel8-inbox.html"><i class="icon icon-circle-o"></i>Panel8 - Inbox</a>
                    </li>
                    <li><a href="panel-page-inbox-create.html"><i class="icon icon-add"></i>Compose</a>
                    </li>
                </ul>
            </li>
            <li class="header light mt-3"><strong>UI COMPONENTS</strong></li>
            <li class="treeview ">
                <a href="#">
                    <i class="icon icon-package text-lime s-18"></i> <span>Apps</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-chat.html"><i class="icon icon-circle-o"></i>Chat</a>
                    </li>
                    <li><a href="panel7-tasks.html"><i class="icon icon-circle-o"></i>Tasks / Todo</a>
                    </li>
                    <li><a href="panel-page-calendar.html"><i class="icon icon-date_range"></i>Calender</a>
                    </li>
                    <li><a href="panel-page-calendar2.html"><i class="icon icon-date_range"></i>Calender 2</a>
                    </li>
                    <li><a href="panel-page-contacts.html"><i class="icon icon-circle-o"></i>Contacts</a>
                    </li>
                    <li><a href="panel1-projects.html"><i class="icon icon-circle-o"></i>Panel1 - Projects</a>
                    </li>
                    <li><a href="panel7-projects-list.html"><i class="icon icon-circle-o"></i>Panel7 - Projects List</a>
                    </li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="icon icon-documents3 text-blue s-18"></i> <span>Pages</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="#"><i class="icon icon-documents3"></i>Blank Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-blank.html"><i class="icon icon-document"></i>Simple Blank</a>
                            </li>
                            <li><a href="panel-page-blank-tabs.html"><i class="icon icon-document"></i>Tabs Blank <i
                                    class="icon icon-angle-left s-18 pull-right"></i></a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-fingerprint text-green"></i>Auth Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="login.html"><i class="icon icon-document"></i>Login Page 1</a>
                            </li>
                            <li><a href="login-2.html"><i class="icon icon-document"></i>Login Page 2</a>
                            </li>
                            <li><a href="login-3.html"><i class="icon icon-document"></i>Login Page 3</a>
                            </li>
                            <li><a href="login-4.html"><i class="icon icon-document"></i>Login Page 4</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-bug text-red"></i>Error Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-404.html"><i class="icon icon-document"></i>404 Page</a>
                            </li>
                            <li><a href="panel-page-500.html"><i class="icon icon-document"></i>500 Page<i
                                    class="icon icon-angle-left s-18 pull-right"></i></a>
                            </li>
                            <li><a href="panel-page-error.html"><i class="icon icon-document"></i>420 Page<i
                                    class="icon icon-angle-left s-18 pull-right"></i></a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-documents3"></i>Other Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-invoice.html"><i class="icon icon-document"></i>Invoice Page</a>
                            </li>
                            <li><a href="panel-page-no-posts.html"><i class="icon icon-document"></i>No Post Page</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="icon icon-goals-1 amber-text s-18"></i> <span>Elements</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-element-widgets.html">
                        <i class="icon icon-widgets amber-text s-14"></i> <span>Widgets</span>
                    </a>
                    </li>
                    <li><a href="panel-element-counters.html">
                        <i class="icon icon-filter_9_plus amber-text s-14"></i> <span>Counters</span>
                    </a>
                    <li><a href="panel-element-buttons.html">
                        <i class="icon icon-touch_app amber-text s-14"></i> <span>Buttons</span>
                    </a>
                    </li>
                    <li>
                        <a href="panel-element-typography.html">
                            <i class="icon icon-text-width amber-text s-14"></i> <span>Typography</span>
                        </a>
                    </li>
                    <li><a href="panel-element-tabels.html">
                        <i class="icon icon-table amber-text s-14"></i> <span>Tables</span>
                    </a>
                    </li>
                    <li><a href="panel-element-alerts.html">
                        <i class="icon icon-exclamation-circle amber-text s-14"></i> <span>Alerts</span>
                    </a>
                    </li>
                    <li><a href="panel-element-slider.html"><i class="icon icon-view_carousel amber-text s-14"></i>
                        <span>Slider</span></a></li>
                    <li><a href="panel-element-tabs.html"><i class="icon icon-folders2 amber-text s-14"></i>
                        <span>Tabs</span></a></li>
                    <li><a href="panel-element-progress-bars.html"><i class="icon icon-folders2 amber-text s-14"></i>
                        <span>Progress Bars</span></a></li>
                    <li><a href="panel-element-badges.html"><i class="icon icon-flag7 amber-text s-14"></i>
                        <span>Badges</span></a></li>
                    <li><a href="panel-element-preloaders.html"><i class="icon icon-data_usage amber-text s-14"></i>
                        <span>Preloaders</span></a></li>
                </ul>
            </li>
            <li class="treeview ">
                <a href="#">
                    <i class="icon icon-wpforms light-green-text s-18 "></i> <span>Forms & Plugins</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-element-forms.html"><i class="icon icon-wpforms light-green-text"></i>Bootstrap
                        Inputs</a>
                    </li>
                    <li><a href="form-jquery-validations.html"><i class="icon icon-note-important light-green-text"></i>
                        Form Validation (Jquery)</a>
                    </li>
                    <li><a href="form-bootstrap-validations.html"><i class="icon icon-note-important light-green-text"></i>
                        Form Validation (Bootstrap)</a>
                    </li>
                    <li><a href="panel-element-editor.html"><i class="icon icon-pen2 light-green-text"></i>Editor</a>
                    </li>
                    <li><a href="panel-element-toast.html"><i
                            class="icon icon-notifications_active light-green-text"></i>Toasts</a>
                    </li>
                    <li><a href="panel-element-stepper.html"><i class="icon icon-burst_mode light-green-text"></i>Stepper</a>
                    </li>
                    <li><a href="panel-element-date-time-picker.html"><i
                            class="icon icon-date_range light-green-text"></i>Date Time Picker</a>
                    </li>
                    <li><a href="panel-element-color-picker.html"><i class="icon icon-adjust light-green-text"></i>Color
                        Picker</a>
                    </li>
                    <li><a href="panel-element-range-slider.html"><i class="icon icon-space_bar light-green-text"></i>Range
                        Slider</a>
                    </li>
                    <li><a href="panel-element-select2.html"><i
                            class="icon  icon-one-finger-click light-green-text"></i>Select 2</a>
                    </li>
                    <li><a href="panel-element-tags.html"><i class="icon  icon-tags3 light-green-text"></i>Tags</a>
                    </li>
                    <li><a href="panel-element-data-tables.html"><i class="icon icon-table light-green-text"></i>Data
                        Tables</a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#">
                <i class="icon icon-bar-chart2 pink-text s-18"></i>
                <span>Charts</span>
                <i class="icon icon-angle-left s-18 pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li>
                        <a href="panel-element-charts-js.html"><i class="icon icon-area-chart pink-text s-14"></i><span>Charts.Js</span></a>
                    </li>
                    <li>
                        <a href="panel-element-morris.html"><i class="icon icon-bubble_chart pink-text s-14"></i>Morris
                            Charts</a>
                    </li>
                    <li>
                        <a href="panel-element-echarts.html">
                            <i class="icon icon-bar-chart-o pink-text s-14"></i>Echarts</a>
                    </li>
                    <li>
                        <a href="panel-element-easy-pie-charts.html">
                            <i class="icon icon-area-chart pink-text s-14"></i>Easy Pie Charts</a>
                    </li>
                    <li>
                        <a href="panel-element-jqvmap.html">
                            <i class="icon icon-map pink-text s-14"></i>Jqvmap</a>
                    </li>
                    <li>
                        <a href="panel-element-sparklines.html">
                            <i class="icon icon-line-chart2 pink-text s-14"></i>Sparklines</a>
                    </li>
                    <li>
                        <a href="panel-element-float.html">
                            <i class="icon icon-pie-chart pink-text s-14"></i>Float Charts</a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#">
                <i class="icon icon-dialpad blue-text  s-18"></i>
                <span>Extra</span>
                <i class="icon icon-angle-left s-18 pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li>
                        <a href="panel-element-letters.html">
                            <i class="icon icon-brightness_auto light-blue-text s-14"></i>
                            <span>Avatar Placeholders</span>
                        </a>
                    </li>
                    <li>
                        <a href="panel-element-icons.html">
                            <i class="icon icon-camera2 light-blue-text s-14"></i> <span>Icons</span>
                        </a>
                    </li>
                    <li><a href="panel-element-colors.html">
                        <i class="icon icon-palette light-blue-text s-14"></i> <span>Colors</span>
                    </a>
                    </li>
                </ul>
            </li>
        </ul>
    </section>
</aside>
<!--Sidebar End-->
<div class="has-sidebar-left">
    <div class="pos-f-t">
    <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark pt-2 pb-2 pl-4 pr-2">
            <div class="search-bar">
                <input class="transparent s-24 text-white b-0 font-weight-lighter w-128 height-50" type="text"
                       placeholder="start typing...">
            </div>
            <a href="#" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-expanded="false"
               aria-label="Toggle navigation" class="paper-nav-toggle paper-nav-white active "><i></i></a>
        </div>
    </div>
</div>
    <div class="sticky">
        <div class="navbar navbar-expand navbar-dark d-flex justify-content-between bd-navbar blue accent-3">
            <div class="relative">
                <a href="#" data-toggle="push-menu" class="paper-nav-toggle pp-nav-toggle">
                    <i></i>
                </a>
            </div>
            <!--Top Menu Start -->
<div class="navbar-custom-menu">
    <ul class="nav navbar-nav">
        <!-- Messages-->
        <li class="dropdown custom-dropdown messages-menu">
            <a href="#" class="nav-link" data-toggle="dropdown">
                   <i class="icon-message "></i>
                   <span class="badge badge-success badge-mini rounded-circle">4</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu pl-2 pr-2">
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u4.png" alt="">
                                    <span class="avatar-badge busy"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u1.png" alt="">
                                    <span class="avatar-badge online"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u2.png" alt="">
                                    <span class="avatar-badge idle"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u3.png" alt="">
                                    <span class="avatar-badge busy"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                    </ul>
                </li>
                <li class="footer s-12 p-2 text-center"><a href="#">See All Messages</a></li>
            </ul>
        </li>
        <!-- Notifications -->
        <li class="dropdown custom-dropdown notifications-menu">
            <a href="#" class=" nav-link" data-toggle="dropdown" aria-expanded="false">
                <i class="icon-notifications "></i>
                <span class="badge badge-danger badge-mini rounded-circle">4</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li class="header">You have 10 notifications</li>
                <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                        <li>
                            <a href="#">
                                <i class="icon icon-data_usage text-success"></i> 5 new members joined today
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon icon-data_usage text-danger"></i> 5 new members joined today
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon icon-data_usage text-yellow"></i> 5 new members joined today
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="footer p-2 text-center"><a href="#">View all</a></li>
            </ul>
        </li>
        <li>
            <a class="nav-link " data-toggle="collapse" data-target="#navbarToggleExternalContent"
               aria-controls="navbarToggleExternalContent"
               aria-expanded="false" aria-label="Toggle navigation">
                <i class=" icon-search3 "></i>
            </a>
        </li>
        <!-- Right Sidebar Toggle Button -->
        <li>
            <a class="nav-link ml-2" data-toggle="control-sidebar">
                <i class="icon-tasks "></i>
            </a>
        </li>
        <!-- User Account-->
        <li class="dropdown custom-dropdown user user-menu ">
            <a href="#" class="nav-link" data-toggle="dropdown">
                <img src="assets/img/dummy/u8.png" class="user-image" alt="User Image">
                <i class="icon-more_vert "></i>
            </a>
            <div class="dropdown-menu p-4 dropdown-menu-right">
                <div class="row box justify-content-between my-4">
                    <div class="col">
                        <a href="#">
                            <i class="icon-apps purple lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Apps</div>
                        </a>
                    </div>
                    <div class="col"><a href="#">
                        <i class="icon-beach_access pink lighten-1 avatar  r-5"></i>
                        <div class="pt-1">Profile</div>
                    </a></div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-perm_data_setting indigo lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Settings</div>
                        </a>
                    </div>
                </div>
                <div class="row box justify-content-between my-4">
                    <div class="col">
                        <a href="#">
                            <i class="icon-star light-green lighten-1 avatar  r-5"></i>
                            <div class="pt-1">Favourites</div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-save2 orange accent-1 avatar  r-5"></i>
                            <div class="pt-1">Saved</div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-perm_data_setting grey darken-3 avatar  r-5"></i>
                            <div class="pt-1">Settings</div>
                        </a>
                    </div>
                </div>
                <hr>
                <div class="row box justify-content-between my-4">
                    <div class="col">
                        <a href="#">
                            <i class="icon-apps purple lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Apps</div>
                        </a>
                    </div>
                    <div class="col"><a href="#">
                        <i class="icon-beach_access pink lighten-1 avatar  r-5"></i>
                        <div class="pt-1">Profile</div>
                    </a></div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-perm_data_setting indigo lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Settings</div>
                        </a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
        </div>
    </div>
</div>
<div class="has-sidebar-left">
    <header class="blue accent-3 relative nav-sticky">
        <div class="container-fluid text-white">
            <div class="row p-t-b-10 ">
                <div class="col">
                    <h4>
                        <i class="icon-area-chart"></i>
                        Charts JS
                    </h4>
                </div>
            </div>
            <div class="row">
                <ul class="nav responsive-tab nav-material nav-material-white">
                    <li>
                        <a class="nav-link active" href="panel-element-charts-js.html">
                            <i class="icon icon-area-chart"></i>Charts.Js</a>
                    </li>
                    <li>
                        <a class="nav-link " href="panel-element-morris.html">
                            <i class="icon icon-bubble_chart"></i>Morris Charts</a>
                    </li>
                    <li>
                        <a class="nav-link" href="panel-element-echarts.html">
                            <i class="icon icon-bar-chart-o"></i>Echarts</a>
                    </li>
                    <li>
                        <a class="nav-link" href="panel-element-easy-pie-charts.html">
                            <i class="icon icon-area-chart"></i>Easy Pie Charts</a>
                    </li>
                    <li>
                        <a class="nav-link" href="panel-element-jqvmap.html">
                            <i class="icon icon-map"></i>Jqvmap</a>
                    </li>
                    <li>
                        <a class="nav-link" href="panel-element-sparklines.html">
                            <i class="icon icon-line-chart2"></i>Sparklines</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <div class="container-fluid my-3">
        <div class="row pb-3">
            <div class="col-md-7">
                <div class="card no-b p-3">
                    <p>Line Chart</p>
                    <div style="height: 450px">
                        <canvas
                                data-chart="line"
                                data-dataset="[[0,528,228,728,528,1628,0]]"
                                data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
                                data-dataset-options="[{ label:'Sales', borderColor:  'rgba(255,99,132,1)', backgroundColor: 'rgba(255, 99, 132, 0.2)'}]">
                        </canvas>
                    </div>
                </div>
                <div class="card no-b p-3 my-3">
                    <p>Bar Chart With Data options</p>
                    <div style="height: 450px">
                        <canvas
                                data-chart="bar"
                                data-dataset="[[0,528,228,728,528,1628,0]]"
                                data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
                                data-dataset-options="[
                                            { label:'Sales', borderColor:  'rgba(255,99,132,1)', backgroundColor: 'rgba(255, 99, 132, 0.2)'}]"
                                data-options="{
                                                maintainAspectRatio: false,
                                                legend: {
                                                    display: true
                                                },
                                                scales: {
                                                    xAxes: [{
                                                        display: true,
                                                        gridLines: {
                                                            zeroLineColor: '#eee',
                                                            color: '#eee',

                                                            borderDash: [5, 5],
                                                        }
                                                    }],
                                                    yAxes: [{
                                                        display: true,
                                                        gridLines: {
                                                            zeroLineColor: '#eee',
                                                            color: '#eee',
                                                            borderDash: [5, 5],
                                                        }
                                                    }]

                                                },
                                                elements: {
                                                    line: {

                                                        tension: 0.4,
                                                        borderWidth: 1
                                                    },
                                                    point: {
                                                        radius: 2,
                                                        hitRadius: 10,
                                                        hoverRadius: 6,
                                                        borderWidth: 4
                                                    }
                                                }
                                            }">
                        </canvas>
                    </div>
                </div>
                <div class="card no-b p-3 my-3">
                    <p>Bar Chart With Data options</p>
                    <div style="height: 450px">
                        <canvas
                                data-chart="line"
                                data-dataset="[[20, 24, 32, 34, 38, 35, 37, 40, 53, 60, 62],[48, 54, 53, 58, 56, 62, 61, 59, 76, 78, 80]]"
                                data-labels="['1', '4', '7', '10', '13', '16', '19', '22', '25', '28', '31']"
                                data-dataset-options="datasets: [{
                    label: 'Revenue',
                    fill: !0,
                    lineTension: 0,
                    backgroundColor: 'rgba(0,172,255, 0.1)',
                    borderWidth: 2,
                    borderColor: '#00AAFF',
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0,
                    borderJoinStyle: 'miter',
                    pointRadius: 4,
                    pointBorderColor: '#00AAFF',
                    pointBackgroundColor: '#fff',
                    pointBorderWidth: 2,
                    pointHoverRadius: 6,
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: '#00AAFF',
                    pointHoverBorderWidth: 2,
                    data: [20, 24, 32, 34, 38, 35, 37, 40, 53, 60, 62],
                    spanGaps: !1
                }, {
                    label: 'Profit',
                    fill: !0,
                    lineTension: 0,
                    backgroundColor: 'rgba(163,136,227, 0.1)',
                    borderWidth: 2,
                    borderColor: '#886CE6',
                    pointRadius: 4,
                    pointBorderColor: '#886CE6',
                    pointBackgroundColor: '#fff',
                    pointBorderWidth: 2,
                    pointHoverRadius: 6,
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: '#886CE6',
                    pointHoverBorderWidth: 2,
                    data: [48, 54, 53, 58, 56, 62, 61, 59, 76, 78, 80],
                    spanGaps: !1
                }]"
                                data-options="{
                legend: {
                    display: !0,
                    labels: {
                        fontColor: '#7F8FA4',
                        fontFamily: 'Source Sans Pro, sans-serif',
                        boxRadius: 4,
                        usePointStyle: !0
                    }
                },
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0
                    }
                },
                scales: {
                    xAxes: [{
                        display: !0,
                        ticks: {
                            fontSize: '11',
                            fontColor: '#969da5'
                        },
                        gridLines: {
                            color: 'rgba(0,0,0,0.0)',
                            zeroLineColor: 'rgba(0,0,0,0.0)'
                        }
                    }],
                    yAxes: [{
                        display: !0,
                        gridLines: {
                            color: 'rgba(223,226,229,0.45)',
                            zeroLineColor: 'rgba(0,0,0,0.0)'
                        },
                        ticks: {
                            beginAtZero: !0,
                            max: 100,
                            stepSize: 25,
                            fontSize: '11',
                            fontColor: '#969da5'
                        }
                    }]
                }
            }">
                        </canvas>
                    </div>
                </div>
                <div class="card no-b p-3 my-3">
                    <p>Multiple Line Charts</p>
                    <div style="height: 450px">
                        <canvas
                                data-chart="line"
                                data-dataset="[
                                                [0,528,228,728,528,1628,0],
                                                [0,628,228,1228,428,1828,0],
                                                ]"
                                data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
                                data-dataset-options="[
                                            { label:'Sales', borderColor:  'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235,1)'},
                                            { label:'Orders', borderColor:  'rgba(255,99,132,1)', backgroundColor: 'rgba(255, 99, 132, 1)' }]"
                                data-options="{
                                                maintainAspectRatio: false,
                                                legend: {
                                                    display: true
                                                },

                                                scales: {
                                                    xAxes: [{
                                                        display: true,
                                                        gridLines: {
                                                            zeroLineColor: '#eee',
                                                            color: '#eee',

                                                            borderDash: [5, 5],
                                                        }
                                                    }],
                                                    yAxes: [{
                                                        display: true,
                                                        gridLines: {
                                                            zeroLineColor: '#eee',
                                                            color: '#eee',
                                                            borderDash: [5, 5],
                                                        }
                                                    }]

                                                },
                                                elements: {
                                                    line: {

                                                        tension: 0.4,
                                                        borderWidth: 1
                                                    },
                                                    point: {
                                                        radius: 2,
                                                        hitRadius: 10,
                                                        hoverRadius: 6,
                                                        borderWidth: 4
                                                    }
                                                }
                                            }">
                        </canvas>
                    </div>
                </div>
                <div class="card no-b p-3 my-3">
                    <p> Gradient Line Chart. </p>
                    <canvas id="gradientChart" width="600" height="300"></canvas>
                    <script>
                        $(function(){
                            'use strict';
                            var ctx = document.getElementById('gradientChart').getContext("2d");

                            var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
                            gradientStroke.addColorStop(0, '#80b6f4');
                            gradientStroke.addColorStop(1, '#f49080');

                            var gradientFill = ctx.createLinearGradient(500, 0, 100, 0);
                            gradientFill.addColorStop(0, "rgba(128, 182, 244, 0.6)");
                            gradientFill.addColorStop(1, "rgba(244, 144, 128, 0.6)");

                            var myChart = new Chart(ctx, {
                                type: 'line',
                                data: {
                                    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
                                    datasets: [{
                                        label: "Data",
                                        borderColor: gradientStroke,
                                        pointBorderColor: gradientStroke,
                                        pointBackgroundColor: gradientStroke,
                                        pointHoverBackgroundColor: gradientStroke,
                                        pointHoverBorderColor: gradientStroke,
                                        pointBorderWidth: 10,
                                        pointHoverRadius: 10,
                                        pointHoverBorderWidth: 1,
                                        pointRadius: 3,
                                        fill: true,
                                        backgroundColor: gradientFill,
                                        borderWidth: 4,
                                        data: [100, 120, 150, 170, 180, 170, 160]
                                    }]
                                },
                                options: {
                                    animation: {
                                        easing: "easeInOutBack"
                                    },
                                    legend: {
                                        position: "bottom"
                                    },
                                    scales: {
                                        yAxes: [{
                                            ticks: {
                                                fontColor: "rgba(0,0,0,0.5)",
                                                fontStyle: "bold",
                                                beginAtZero: true,
                                                maxTicksLimit: 5,
                                                padding: 20
                                            },
                                            gridLines: {
                                                drawTicks: false,
                                                display: false
                                            }

                                        }],
                                        xAxes: [{
                                            gridLines: {
                                                zeroLineColor: "transparent"
                                            },
                                            ticks: {
                                                padding: 20,
                                                fontColor: "rgba(0,0,0,0.5)",
                                                fontStyle: "bold"
                                            }
                                        }]
                                    }
                                }
                            });
                        });
                    </script>
                </div>
                <div class="card no-b p-3 my-3">
                    <p>Gradient Stroke Line Chart. </p>
                    <canvas id="strokeChart" width="600" height="300"></canvas>
                    <script>
                        $(function(){
                            'use strict';
                            var ctx = document.getElementById('strokeChart').getContext("2d");

                            var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
                            gradientStroke.addColorStop(0, '#80b6f4');
                            gradientStroke.addColorStop(1, '#f49080');

                            var myChart = new Chart(ctx, {
                                type: 'line',
                                data: {
                                    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
                                    datasets: [{
                                        label: "Data",
                                        borderColor: "transparent",
                                        pointBorderColor: gradientStroke,
                                        pointBackgroundColor: gradientStroke,
                                        pointHoverBackgroundColor: gradientStroke,
                                        pointHoverBorderColor: gradientStroke,
                                        pointBorderWidth: 10,
                                        pointHoverRadius: 10,
                                        pointHoverBorderWidth: 1,
                                        pointRadius: 3,
                                        fill: false,
                                        data: [100, 120, 150, 170, 180, 170, 160]
                                    }]
                                },
                                options: {
                                    legend: {
                                        position: "bottom"
                                    },
                                    scales: {
                                        yAxes: [{
                                            ticks: {
                                                fontColor: "rgba(0,0,0,0.5)",
                                                fontStyle: "bold",
                                                beginAtZero: true,
                                                maxTicksLimit: 5,
                                                padding: 20
                                            },
                                            gridLines: {
                                                drawTicks: false,
                                                display: false
                                            }

                                        }],
                                        xAxes: [{
                                            gridLines: {
                                                zeroLineColor: "transparent"
                                            },
                                            ticks: {
                                                padding: 20,
                                                fontColor: "rgba(0,0,0,0.5)",
                                                fontStyle: "bold"
                                            }
                                        }]
                                    }
                                }
                            });
                        });
                    </script>
                </div>
                <div class="card no-b p-3 my-3">
                    <p>Shadow Line Chart. </p>
                    <canvas id="shadowChart" width="600" height="300" style="background-color:#fff"></canvas>
                    <script>
                        $(function(){
                            'use strict';
                            let draw = Chart.controllers.line.prototype.draw;
                            Chart.controllers.line = Chart.controllers.line.extend({
                                draw: function() {
                                    draw.apply(this, arguments);
                                    let ctx = this.chart.chart.ctx;
                                    let _stroke = ctx.stroke;
                                    ctx.stroke = function() {
                                        ctx.save();
                                        ctx.shadowColor = '#E56590';
                                        ctx.shadowBlur = 10;
                                        ctx.shadowOffsetX = 0;
                                        ctx.shadowOffsetY = 4;
                                        _stroke.apply(this, arguments)
                                        ctx.restore();
                                    }
                                }
                            });

                            let ctx = document.getElementById("shadowChart").getContext('2d');
                            let myChart = new Chart(ctx, {
                                type: 'line',
                                data: {
                                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                                    datasets: [{
                                        label: "My First dataset",
                                        data: [65, 59, 80, 81, 56, 55, 40],
                                        borderColor: '#ffb88c',
                                        pointBackgroundColor: "#fff",
                                        pointBorderColor: "#ffb88c",
                                        pointHoverBackgroundColor: "#ffb88c",
                                        pointHoverBorderColor: "#fff",
                                        pointRadius: 4,
                                        pointHoverRadius: 4,
                                        fill: false
                                    }]
                                }
                            });
                        });
                    </script>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="card no-b p-3 my-3">
                            <p>Pie Chart</p>
                            <div style="height: 300px">
                                <canvas
                                        data-chart="pie"
                                        data-dataset="[
                                                        [75, 50],
                                                        [25, 50],
                                                    ]"
                                        data-labels="[['Disk'],['Database']]"
                                        data-dataset-options="[
                                                    {
                                                        label: 'Disk',
                                                        backgroundColor: [
                                                            'rgba(255, 99, 132, 0.2)',
                                                            'rgba(54, 162, 235, 0.2)',
                                                        ],

                                                    },
                                                    {
                                                        label: 'Database',
                                                        backgroundColor: [
                                                        'rgba(255, 206, 86, 0.2)',
                                                        'rgba(75, 192, 192, 0.2)',
                                                        ],

                                                    },

                                                    ]"
                                >
                                </canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card no-b p-3 my-3">
                            <p>Pie Chart</p>
                            <div style="height: 300px">
                                <canvas
                                        data-chart="bar"
                                        data-dataset="[
                                        [21, 90, 55, 0, 59, 77, 12],
                                        [12, 0, 55, 60, 79, 99, 12],
                                        [12, 40, 16, 17, 89, 0, 12],
                                        ]"
                                        data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
                                        data-dataset-options="[
                                    {
                                        label: 'HTML',
                                        borderColor:   'rgba(255, 99, 132, 1)',
                                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                        borderWidth: 1
                                    },
                                    {
                                         label: 'Wordpress',
                                         borderColor:  'rgba(54, 162, 235, 1)',
                                         backgroundColor: 'rgba(54, 162, 235, 0.2)',
                                         borderWidth: 1
                                     },
                                    {
                                          label: 'Laravel',borderColor:
                                         'rgba(75, 192, 192, 1)',
                                          backgroundColor: 'rgba(75, 192, 192, 0.2)',
                                          borderWidth: 1
                                      }
                                    ]"
                                        data-options="{
                                      legend: {
                                            display: true,
                                      },
                                        scales: {
                                            yAxes: [{
                                                stacked: true
                                            }]
                                        }
                                }"
                                >
                                </canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5 sticky">
                <h3>Documentation</h3>
                <hr>
                <p>You can pass plugin options using following data attributes. Please make sure to use valid json
                    code.</p>
                <a href="http://www.chartjs.org/docs/" target="_blank"
                   class="btn btn-xs btn-primary">Plugin Docs</a>
                <a href="https://jsonformatter.org/" target="_blank" class="btn btn-outline-primary btn-xs">JSON
                    Formatter</a>
                <table class="table table-striped mt-3">
                    <tbody>
                    <tr>
                        <td>data-chart</td>
                        <td>
                            Type of chart for example: line , bar, spark
                        </td>
                    </tr>
                    <tr>
                        <td>data-dataset</td>
                        <td>
                            Array or Arrays of Values
                        </td>
                    </tr>
                    <tr>
                        <td>data-labels</td>
                        <td>
                            Array or Arrays of Labels
                        </td>
                    </tr>
                    <tr>
                        <td>data-dataset-options</td>
                        <td>
                            Chart options data sets
                        </td>
                    </tr>
                    </tbody>
                </table>
                <h4 class="mt-5">Code Example</h4>
                <hr>
                <pre><code>

&lt;div style="height: 450px"&gt;
&nbsp;&nbsp;&nbsp;&lt;canvas
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-chart="line"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-dataset="[[0,528,228,728,528,1628,0]]"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-dataset-options="[{ label:'Sales', borderColor:  'rgba(255,99,132,1)', backgroundColor: 'rgba(255, 99, 132, 0.2)'}]"&gt;
&nbsp;&nbsp;&nbsp;&lt;/canvas&gt;
&lt;/div&gt;

</code></pre>
                <h4 class="mt-5">Code Example</h4>
                <hr>
                <pre><code>

&lt;div style="height: 300px"&gt;
&nbsp;&nbsp;&nbsp;&lt;canvas
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-chart="pie"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-dataset="[
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[75, 50],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[25, 50],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-labels="[['Disk'],['Database']]"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-dataset-options="[
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label: 'Disk',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backgroundColor: [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'rgba(255, 99, 132, 0.2)',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'rgba(54, 162, 235, 0.2)',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label: 'Database',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backgroundColor: [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'rgba(255, 206, 86, 0.2)',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'rgba(75, 192, 192, 0.2)',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
&nbsp;&nbsp;&nbsp;&lt;/canvas&gt;
&lt;/div&gt;

</code></pre>
            </div>
        </div>
        <!--Style Start 1-->
        <div class="row my-3">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header white">
                        <strong> Spark Charts With Charts JS </strong>
                    </div>
                    <div class="card-body p-0">
                        <div class="row no-gutters">
                            <div class="col-md-4">
                                <div class="p-5 bg-primary text-white">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h5 class="font-weight-normal s-14">Sodium</h5>
                                            <span class="s-48 font-weight-lighter text-primary">Spark Bar</span>
                                            <div> Oxygen
                                                <span class="text-primary">
                                                    <i class="icon icon-arrow_downward"></i> 67%</span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <canvas
                                                    width="100"
                                                    height="70"
                                                    data-chart="spark"
                                                    data-chart-type="bar"
                                                    data-dataset="[[28,68,41,43,96,45,100,28,68,41,43,96,45,100,28,68,41,43,96,45,100,28,68,41,43,96,45,100]]"
                                                    data-labels="['a','b','c','d','e','f','g','h','i','j','k','l','m','n','a','b','c','d','e','f','g','h','i','j','k','l','m','n']">
                                            </canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="p-5 bg-dark">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <h5 class="font-weight-normal s-14">Iron</h5>
                                            <span class="s-48 font-weight-lighter light-green-text">675</span>
                                            <div> Carbon
                                                <span class="text-light-green">
                                                    <i class="icon icon-arrow_downward"></i> 67%</span>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <canvas width="378" height="100" data-chart="spark" data-chart-type="line"
                                                    data-dataset="[[0,1030,200,430]]" data-labels="['a','b','c','d']"
                                                    data-dataset-options="[
                                                            { fill: '1', borderColor:  'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235,1)'},
                                                            ]">
                                            </canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="p-5">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <h5 class="font-weight-normal s-14">Iron</h5>
                                            <span class="icon icon-inbox-document-text s-48 text-primary"></span>
                                            <div> Carbon
                                                <span class="text-light-green">
                                                    <i class="icon icon-arrow_downward"></i> 67%</span>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <canvas width="450" height="175" data-chart="spark" data-chart-type="pie"
                                                    data-dataset="[ [75, 50], [25, 50], ]"
                                                    data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
                                                    data-dataset-options="[ { label: 'Disk', backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', ], }, { label: 'Database', backgroundColor: [ 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', ], }, ]">
                                            </canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Style End 1-->
        <div class="card">
            <div class="card-header white">More Spark Charts With Charts JS</div>
            <div class="card-body p-0">
                <div class="row no-gutters ">
                    <div class="col-md-3">
                        <div class="bg-primary text-white lighten-2">
                            <div class="pt-5 pb-2 pl-5 pr-5">
                                <h5 class="font-weight-normal s-14">Bit Coin</h5>
                                <span class="s-48 font-weight-lighter text-primary">
                                    <small>$</small>960</span>
                                <div class="float-right">
                                    <span class="icon icon-chart s-48"></span>
                                </div>
                            </div>
                            <canvas width="378" height="94" data-chart="spark" data-chart-type="bar"
                                    data-dataset="[[28,68,41,43,96,45,100,28,68,41,43,96,45,100]]"
                                    data-labels="['a','b','c','d','e','f','g','h','i','j','k','l','m','n']">
                            </canvas>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="lighten-2">
                            <div class="pt-5 pb-2 pl-5 pr-5">
                                <h5 class="font-weight-normal s-14">Bit Coin</h5>
                                <span class="s-48 font-weight-lighter text-primary">
                                    <small>$</small>
                                    <span class="sc-counter">960</span>
                                </span>
                                <div class="float-right">
                                    <span class="icon icon-arrow_downward s-48"></span>
                                </div>
                            </div>
                            <canvas width="378" height="94" data-chart="spark" data-chart-type="line"
                                    data-dataset="[[0,95,228,100,528,400,0]]"
                                    data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
                                    data-dataset-options="[
                                            { borderColor:  'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235,1)'},
                                            ]">
                            </canvas>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="lighten-2 bg-light">
                            <div class="pt-5 pb-2 pl-5 pr-5">
                                <h5 class="font-weight-normal s-14">Bit Coin</h5>
                                <span class="s-48 font-weight-lighter text-primary">
                                    <small>$</small>
                                    <span class="sc-counter">960</span>
                                </span>
                                <div class="float-right">
                                    <span class="icon icon-arrow_downward s-48"></span>
                                </div>
                            </div>
                            <canvas width="378" height="94" data-chart="spark" data-chart-type="line" data-dataset="[
                                            [0,528,228,728,528,1628,0],
                                            [0,628,228,1228,428,1828,0],
                                            ]" data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
                                    data-dataset-options="[
                                            { borderColor:  'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235,1)'},
                                            { borderColor:  'rgba(255,99,132,1)', backgroundColor: 'rgba(255, 99, 132, 1)' }
                
                                            ]" style="width: 189px; height: 47px;">
                            </canvas>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="bg-primary text-white lighten-2">
                            <div class="pt-5 pb-2 pl-5 pr-5">
                                <h5 class="font-weight-normal s-14">Bit Coin</h5>
                                <span class="s-48 font-weight-lighter text-primary">
                                    <small>$</small>960</span>
                                <div class="float-right">
                                    <span class="icon icon-chart s-48"></span>
                                </div>
                            </div>
                            <canvas width="378" height="94" data-chart="spark" data-chart-type="line"
                                    data-dataset="[[28,530,200,430]]" data-labels="['a','b','c','d']"
                                    data-dataset-options="[
                                            { borderColor:  'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235,1)'},
                                            ]">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Right Sidebar -->
<aside class="control-sidebar fixed white ">
    <div class="slimScroll">
        <div class="sidebar-header">
            <h4>Activity List</h4>
            <a href="#" data-toggle="control-sidebar" class="paper-nav-toggle  active"><i></i></a>
        </div>
        <div class="p-3">
            <div>
                <div class="my-3">
                    <small>25% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>45% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 45%;" aria-valuenow="45"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>60% Complete</small>
                    `
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>75% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 75%;" aria-valuenow="75"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>100% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-3 bg-primary text-white">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="font-weight-normal s-14">Sodium</h5>
                    <span class="font-weight-lighter text-primary">Spark Bar</span>
                    <div> Oxygen
                        <span class="text-primary">
                                                    <i class="icon icon-arrow_downward"></i> 67%</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <canvas width="100" height="70" data-chart="spark" data-chart-type="bar"
                            data-dataset="[[28,68,41,43,96,45,100,28,68,41,43,96,45,100,28,68,41,43,96,45,100,28,68,41,43,96,45,100]]"
                            data-labels="['a','b','c','d','e','f','g','h','i','j','k','l','m','n','a','b','c','d','e','f','g','h','i','j','k','l','m','n']">
                    </canvas>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table id="recent-orders" class="table table-hover mb-0 ps-container ps-theme-default">
                <tbody>
                <tr>
                    <td>
                        <a href="#">INV-281281</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 1228.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-01112</a>
                    </td>
                    <td>
                        <span class="badge badge-warning">Overdue</span>
                    </td>
                    <td>$ 5685.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-281012</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 152.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-01112</a>
                    </td>
                    <td>
                        <span class="badge badge-warning">Overdue</span>
                    </td>
                    <td>$ 5685.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-281012</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 152.28</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="sidebar-header">
            <h4>Activity</h4>
            <a href="#" data-toggle="control-sidebar" class="paper-nav-toggle  active"><i></i></a>
        </div>
        <div class="p-4">
            <div class="activity-item activity-primary">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 5 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet conse ctetur which ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-danger">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 8 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit ametcon the sectetur that ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-success">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 10 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet cons the ecte tur and adip ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-warning">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 12 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet consec tetur adip ascing elit users.</p>
                </div>
            </div>
        </div>
    </div>
</aside>
<!-- /.right-sidebar -->
<!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
<div class="control-sidebar-bg shadow white fixed"></div>
</div>
<!--/#app -->
<script src="assets/js/app.js"></script>
<!--
--- Footer Part - Use Jquery anywhere at page.
--- http://writing.colin-gourlay.com/safely-using-ready-before-including-jquery/
-->
<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>
</body>
</html>